<template>
  <view class="container">
    <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collectionList" field="modify_time,coupon_begin,coupon_end,coupon_discount,coupon_name,coupon_price,coupon_type,coupon_limit,coupon_num">
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="data">
       <!-- <uni-list>
          <uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true" @click="handleItemClick(item._id)">
            <template v-slot:body>
              <text>   {{item.coupon_name}}  </text>
            </template>
          </uni-list-item>
        </uni-list> -->
		 <view class="coupon-center">
	  	<div class="swiper-box">
	  		<div class="swiper-item">
	  			<div class="scroll-v" enableBackToTop="true" scroll-y>
	  				<view  class="coupon-item" v-for="(item, index) in data" :key="index">
	  					<view class="left">
	  						<view class="wave-line">
	  							<view class="wave" v-for="(item, index) in 12" :key="index"></view>
	  						</view>
	  						<view class="message">
	  							<view>
	  								 <span v-if="item.coupon_discount != null">{{ item.coupon_discount }}折</span>
	  								<span v-else>{{ item.coupon_price }}元</span>
	  							</view>
	  							<view>满{{ item.coupon_limit }}元可用</view>
	  						</view>
	  						<view class="circle circle-top"></view>
	  						<view class="circle circle-bottom"></view>
	  					</view>
	  					<view class="right">
	  						<view> 
	  							<view class="coupon-title wes-3" >
	  								<span v-if="item.coupon_type == 0">全平台</span> 
	  							 <view v-else>光明小店专用
	  								</view>
	  							</view>
	  							<view style="color:darkgray;"><span v-if="item.coupon_num > 0" >剩余{{item.coupon_num}}张</span></view>
	  							<view >有效期至：{{ item.coupon_end.toString().split(" ")[0] }}</view>
	  						</view>
	  						<view class="receive" @click="receive(item)">
	  							<text>点击</text><br />
	  							<text>领取</text>
	  						</view>
	  						<view class="bg-quan"> 券 </view>
	  					</view>
	  				</view>
	  
	  			</div>
	  		</div>
	  	</div>
	  </view>
		
      </view>
	  
	 
	  
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
		
		<view class="left">
			<view class="wave-line">
				<view class="wave" v-for="(item, index) in 12" :key="index"></view>
			</view>
			<view class="message">
				<!-- <view> 
					<span v-if="item.couponDiscount != null">{{ item.couponDiscount }}折</span>
					<span v-else>{{ item.couponPrice }}元</span>
				</view> -->
				<!-- <view>满{{ item.couponLimit }}元可用</view> -->
			</view>
			<view class="circle circle-top"></view>
			<view class="circle circle-bottom"></view>
		</view>
	</unicloud-db>
    
  </view>
</template>

<script>
  const db = uniCloud.database()
  export default {
    data() {
      return {
        collectionList: "t_shop_coupon",
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      }
    },
    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
    methods: {
      handleItemClick(id) {
        uni.navigateTo({
          url: './detail?id=' + id
        })
      },
	  couponNumShort(value,id) {
	    // 使用 clientDB 提交数据
	    return db.collection('t_shop_coupon').doc(id).update(value).then((res) => {
	      this.getOpenerEventChannel().emit('refreshData')
	      setTimeout(() => uni.navigateBack(), 500)
	    }).catch((err) => {
	      uni.showModal({
	        content: err.message || '请求服务失败',
	        showCancel: false
	      })
	    })
	  },
	  // 领取优惠券
	  addCoupon(value) {
	  	console.log('领券') 
	    return db.collection('t_shop_coupon_user').add(value).then((res) => {
	      uni.showToast({
	        icon: 'none',
	        title: '领券成功'
	      })
	      this.getOpenerEventChannel().emit('refreshData')
	      setTimeout(() => uni.navigateBack(), 500)
	    }).catch((err) => {
	      uni.showModal({
	        content: err.message || '请求服务失败',
	        showCancel: false
	      })
	    })
	  },
      receive(item) {
		uni.showLoading({
			mask: true
		})	
      	const couponid=item._id 
		const uid=uniCloud.getCurrentUserInfo().uid
		let timestamp = Date.now()  
		let time = new Date(timestamp).toLocaleString('chinese', { hour12: false });
		console.log(time)
		// console.log(uid)
  //     	console.log("领券",item._id) 
		let original_begin_time =Date.parse(item.coupon_begin)
		let original_end_time =Date.parse(item.coupon_end)
		console.log(original_begin_time)
		console.log(original_end_time)
		let now_num = item.coupon_num-1
		// console.log(now_num)
		let id = item._id
		// console.log(id)
      	let formData = { 
      	  "coupon_begin": original_begin_time,
      	  "coupon_end": original_end_time, 
      	  "coupon_name": item.coupon_name,  
		  "coupon_type": item.coupon_type,
		  "coupon_num": now_num,  
      	} 
		this.couponNumShort(formData,id) 
		let formData1 = {
		  "coupon_id": couponid,
		  "user_id": uid,
		  "create_time": timestamp, 
		  "coupon_status": "1", 
		} 
      	  return this.addCoupon(formData1) 
      	  uni.hideLoading()  
      },
    }
  }
</script>

<style lang="scss" scoped>
	.coupon-center {
		height: 100%;

		.swiper-box {
			.coupon-item {
				display: flex;
				align-items: center;
				height: 220rpx;
				margin: 20rpx;

				.left {
					height: 100%;
					width: 260rpx;
					background-color: #ff6b35;
					position: relative;

					.message {
						color: #ffffff;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						margin-top: 40rpx;

						view:nth-child(1) {
							font-weight: bold;
							font-size: 60rpx;
						}

						view:nth-child(2) {
							font-size: 24rpx;
						}
					}

					.wave-line {
						height: 220rpx;
						width: 8rpx;
						position: absolute;
						top: 0;
						left: 0;
						background-color:#ff6b35;
						overflow: hidden;

						.wave {
							width: 8rpx;
							height: 16rpx;
							background-color: #ffffff;
							border-radius: 0 16rpx 16rpx 0;
							margin-top: 4rpx;
						}
					}

					.circle {
						width: 40rpx;
						height: 40rpx;
						background-color: #f9f9f9;
						position: absolute;
						border-radius: 50%;
						z-index: 111;
					}

					.circle-top {
						top: -20rpx;
						right: -20rpx;
					}

					.circle-bottom {
						bottom: -20rpx;
						right: -20rpx;
					}
				}

				.right {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 450rpx;
					font-size: 24rpx;
					height: 100%;
					background-color: #ffffff;
					overflow: hidden;
					position: relative;

					>view:nth-child(1) {
						color: #666666;
						margin-left: 20rpx;
						display: flex;
						height: 100%;
						flex-direction: column;
						justify-content: space-around;

						>view:nth-child(1) {
							color: #ff6262;
							font-size: 30rpx;
						}
					}

					.receive {
						color: #ffffff;
						background-color:#ff3c2a;
						border-radius: 50%;
						width: 86rpx;
						height: 86rpx;
						text-align: center;
						margin-right: 30rpx;
						vertical-align: middle;
						padding-top: 8rpx;
						position: relative;
						z-index: 2;
					}

					.bg-quan {
						width: 244rpx;
						height: 244rpx;
						border: 6rpx solid #ff3c2a;
						border-radius: 50%;
						opacity: 0.1;
						color: #ff3c2a;
						text-align: center;
						padding-top: 30rpx;
						font-size: 130rpx;
						position: absolute;
						right: -54rpx;
						bottom: -60rpx;
					}
				}
			}
		}
	}

	.coupon-title {
		width: 260rpx;

	}
</style>
